import React from 'react'
import {
  StyleSheet,
  Text,
  View,
  Button
} from 'react-native'
import moment from 'src/helper/moment'
import {
  Container, Avatar, Tap, Member, Title, TitleText, Info, InfoText, MemberName, Flex, FlexItem, UpdateText, Content
} from './listitem.css'
import { inject, observer } from 'src/core/store'
@inject('CnodeListStore')
@observer
export default class extends React.Component {
  // 防止props 更新
  setDetail= () => {
    const {item, navigate} = this.props
    this.props.CnodeListStore.setItem(item)
    navigate('CnodeDetail')
  }

  render () {
    const {item} = this.props
    return (
      <Tap onPress={this.setDetail} activeOpacity={0.8}>
        <Container>
          <Member>
            <Avatar source={{uri: item.author.avatar_url}}/>
            <MemberName>{item.author.loginname}</MemberName>
          </Member>
          <Content>
            <Title>
              <TitleText>{item.title}</TitleText>
              <UpdateText>{moment(item.last_reply_at).fromNow()}</UpdateText>
            </Title>
            <Flex>
              <FlexItem>
                <InfoText>访问：{item.visit_count}</InfoText>
              </FlexItem>

              <FlexItem>
                <InfoText>评论：{item.reply_count}</InfoText>
              </FlexItem>
              <FlexItem>
                <InfoText>发布：{moment(item.create_at).fromNow()}</InfoText>
              </FlexItem>
            </Flex>
          </Content>
        </Container>
      </Tap>
    )
  }
}
